<html>
  <body>
    <h1>Should correctly load a third-party diagram using registerDiagram</h1>
    <pre id="diagram" class="mermaid">
mindmap
  root
    A
    B
    C
    D
    E
    A2
    B2
    C2
    D2
    E2
    child1((Circle))
        grandchild 1
        grandchild 2
    child2(Round rectangle)
        grandchild 3
        grandchild 4
    child3[Square]
        grandchild 5
        ::icon(mdi mdi-fire)
        gc6((grand<br/>child 6))
        ::icon(mdi mdi-fire)
          gc7((grand<br/>grand<br/>child 8))
    </pre>
    <!-- <pre id="diagram" class="mermaid2">
      example-diagram
    </pre> -->

    <!-- <div id="cy"></div> -->
    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
    <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
    <script type="module">
      import mindmap from '../../packages/mermaid-mindmap/src/detector';
      // import example from '../../packages/mermaid-example-diagram/src/detector';
      import mermaid from '../../packages/mermaid/src/mermaid';

      await mermaid.registerExternalDiagrams([mindmap]);
      await mermaid.initialize({ logLevel: 0 });
      await mermaid.initThrowsErrorsAsync();
    </script>
  </body>
</html>
